<template>
  <div class="roulette-container">
    <div class="roulette" :style="{ transform: 'rotate(' + rotation + 'deg)' }">
      <div v-for="(item, index) in items" :key="index" class="roulette-item" :style="{ 
        'transform': `rotate(${index * (360 / items.length)}deg)` 
        }">
        {{ item.text }}
      </div>
    </div>
    <button class="spin-btn" @click="startSpin" :disabled="spinning">开始抽奖</button>
    <div v-if="winner" class="winner-info">
      <p>恭喜你，抽中了 {{ winner.text }}！</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '奖项1' },
        { id: 2, text: '奖项2' },
        { id: 3, text: '奖项3' },
        { id: 4, text: '奖项4' },
        { id: 5, text: '奖项5' },
        { id: 6, text: '奖项6' },
        { id: 7, text: '奖项7' },
        { id: 8, text: '奖项8' },
      ],
      rotation: 0,
      spinning: false,
      winner: null,
    };
  },
  methods: {
    startSpin() {
      if (!this.spinning) {
        this.spinning = true;
        const randomIndex = Math.floor(Math.random() * this.items.length);
        const totalDegree = 360 * 5 + randomIndex * (360 / this.items.length);

        this.rotation = totalDegree;
        setTimeout(() => {
          this.winner = this.items[randomIndex];
          this.resetSpin();
        }, 4000);
      }
    },
    resetSpin() {
      this.rotation = 0;
      this.spinning = false;
    },
  },
};
</script>

<style scoped>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.roulette-container {
  position: relative;
}

.roulette {
  width: 300px;
  height: 300px;
  background-color: #f00;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 4s ease-out;
}

.roulette-item {
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: 100%;
}

.roulette-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  transform: translateY(-50%);
}

.spin-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  outline: none;
}

.spin-btn:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}


</style>
